<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="../common/base.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>

<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>login</title>
<link href="${path }/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="${path }/dist/css/Buttom.css" rel="stylesheet" />
<link href="${path }/dist/css/flat-ui.css" rel="stylesheet">
<link href='${path }/dist/css/zTreeStyle/zTreeStyle.css'
	rel='stylesheet' />
<link href="${path }/dist/css/bootstrap-datetimepicker.min.css" rel="stylesheet"><%--时间日期工具 --%>
<link
	href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"
	rel="stylesheet">
<%--png 图标 --%>
<%-- 属flat-ui--%>
<%--<link href="${path }/dist/css/bootstrap2/bootstrap-switch.css" rel="stylesheet">--%>

<style type="text/css">
	table tr .title{
		width: 200px;
	}
	.aid_li>li{
		list-style-type:none;
		margin-top: 4px;
		padding-left: 10px;
		padding-right: 10px;
		cursor: pointer;
		
	}
	.aid_li>li:first-child{
		margin-top:10px; 
	}
	.aid_li>li:nth-child(even){
		background-color: #eee;
	}
	.aid_li{
		border: 1px solid #ccc;
		padding:0px;
		background-color: #fff;
		
	}
	#emptreeNode.ztree span.button.switch{
	display: none;/* 取消树的+/-*/
}
</style>

</head>
<body>
	<div class="panel panel-default">
		<div class="panel-heading" style="background: none;">
			<span class="fui-new"></span> <span>新建用户</span>
		</div>
		<div class="panel-body" style="padding: 0px;">
		<form action="${path }/newuser/new" id="newUser" method="post">
			<div class="table-responsive">
				<table class="table table-bordered table-hover">
					<thead>
						<tr><th colspan="4">以下选项由管理员设置：</th></tr>
					</thead>
					<tbody>
						<tr><td class="title">用户名：</td>
							<td><input type="text" class="form-control input-sm" name="user.account"/></td>
							<td class="title">真实姓名：</td>
							<td><input type="text" class="form-control input-sm" name="user.fullname"/></td>
						</tr>
						<tr><td class="title">主角色：</td>
							<td><select class="form-control input-sm" style="padding: 0px;" id="select1" name="roleid">
  									<c:forEach var="wal" items="${rolelist}" varStatus="status">
										<option value="${wal.id }">${wal.name}</option>
									</c:forEach>
  								</select>
  								
  							</td>
  						</tr>
						<tr><td class="title">辅助角色：</td>
							<td><div class="col-sm-8" style="margin:0px;padding: 0px;"><input type="text" class="form-control input-sm" id="aid_character" readonly="readonly"/><input type="hidden" id="aid_hidden" value="" name="aidroleid"/></div>
								<div class="col-sm-4" style="top: 5px;">
									<button onclick="showMenu()" id="menuBtn" type="button" class="buttons button-large button-action button-border button-circle button-tiny" style="color: #000;padding: 0px;">选择</button>
									<button onclick="emptyInput()" type="button" class="buttons button-large button-action button-border button-circle button-tiny" style="color: #000;padding: 0px;"><i class="fa fa-reply"></i></button>
								</div>
								
							</td>
						</tr>
						<tr><td class="title">用户排序号：</td><td><input type="text" class="form-control input-sm"/></td></tr>
						<tr><td class="title">部门：</td>
							<td><input type="text" class="form-control input-sm" onclick="showEmpTree()" id="empid_input" readonly="readonly">
								<input type="hidden" name="empno" value="">
							</td></tr>
						<tr><td class="title">管理范围：</td>
							<td><select class="form-control input-sm" style="padding: 0px;" name="user.range">
  									<option>本部门</option>
  									<option>2</option>
  									<option>3</option>
  									<option>4</option>
  									<option>5</option>
  								</select>
  							</td>
  						</tr>
						<tr><td class="title">系统访问控制：</td>
							
  						</tr>
						<tr><td class="title">考勤排班类型：</td>
							<td><select class="form-control input-sm" style="padding: 0px;" name="user.scheduling">
  									<option>正常班</option>
  									<option>夜班</option>
  									<option>白班</option>
  									<option>早班</option>
  								</select>
  							</td>
  							<td class="title">IMA广播权限：</td>
  							<td><label class="radio-inline">
  								<input type="radio" name="ima" id="inlineRadio1" value="yes">有
								</label>
								<label class="radio-inline">
  									<input type="radio" name="ima" id="inlineRadio2" value="no" checked="checked" >无
								</label>
							</td>
  						</tr>
						<tr><td class="title">绑定ip地址：</td><td><input type="text" class="form-control input-sm" name="user.ip"/></td></tr>
						<tr><td class="title">内部邮箱容量：</td>
							<td > <div class="col-xs-6"><input type="text" class="form-control input-sm" name="user.emailCapacity" onkeyup="this.value=this.value.replace(/\D/g,'')" /></div>MB</td>
							<td class="title">个人文件柜容量：</td>
							<td > <div class="col-xs-6"><input type="text" class="form-control input-sm" name="user.fileCapacity" onkeyup="this.value=this.value.replace(/\D/g,'')"  /></div>MB</td>
						</tr>
					</tbody>
				</table>
				
				
				<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th colspan="4">以下选项用户可自行设置：</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="title">别名：</td>
							<td><input type="text" class="form-control input-sm" name="userd.aliases"/></td>
							<td class="title">性别：</td>
  							<td><label class="radio-inline">
  								<input type="radio" name="userd.sex" id="inlineRadio1" value="男" checked="checked">男
								</label>
								<label class="radio-inline">
  									<input type="radio" name="userd.sex" id="inlineRadio2" value="女"  >女
								</label>
							</td>
						</tr>
						
						<tr><td class="title">密码：</td><td><input type="password" class="form-control input-sm" name="user.pass"/></td></tr>
						<tr><td class="title">生日：</td>
						<td>
                    		<input class="form-control form_datetime" size="16" type="text" value="" readonly name="userd.birthday">
            			</td></tr>
					</tbody>
					<tfoot>
						<tr>
							<td colspan="4" style="text-align: center;">
								<button type="button" class="btn btn-primary" onclick="bsubimt()">确认</button>
								<button type="button" class="btn btn-danger" onclick="javascript :history.back(-1)">取消</button>
							</td>
						</tr>
					</tfoot>
				</table>
				
			</div>
			</form>
		</div>
	</div>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
	<ul id="select_aid" class="aid_li" style="margin-top:0; width:160px;">
		<c:forEach var="wal" items="${rolelist}" varStatus="status">
			<li id="${wal.id}"><a onclick="addAidRole(this,'${wal.id}','${wal.name}')">${wal.name}</a></li>
		</c:forEach>
	</ul>
</div>
<div class="ztree aid_li" id="emptreeNode" style="display:none; position: absolute;" ></div>
	<script src="${path }/dist/js/jquery.min.js"></script>
	<script src="${path }/dist/js/bootstrap.min.js"></script>
	<script src='${path }/dist/js/jquery.ztree.core-3.5.js'></script>
	<script src='${path }/dist/js/jquery.ztree.excheck-3.5.js'></script>
	<script src='${path }/dist/js/jquery.ztree.exedit-3.5.js'></script>
	<script src="${path }/dist/js/bootstrap-datetimepicker.min.js"></script>
	<script src="${path }/dist/js/bootstrap-datetimepicker.zh-CN.js"></script>
	<script type="text/javascript">
	<!--
	//弹出 辅助角色菜单 为body 绑定点击事件
	function showMenu() {
		var cityObj = $("#aid_character");
		var cityOffset = cityObj.offset();
		$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

		$("body").bind("mousedown", onBodyDown);
	}
	//接触 body绑定
	function hideMenu() {
		$("#menuContent").fadeOut("fast");
		$("#emptreeNode").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
		$("body").unbind("mousedown", onBodyDownemp);
	}
	//弹出 部门树   为body 绑定点击事件
	function showEmpTree() {
		var cityObj = $("#empid_input");
		var cityOffset = cityObj.offset();
		$("#emptreeNode").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

		$("body").bind("mousedown", onBodyDownemp);
	}
	//
	function onBodyDownemp(event) {
		
		if (!(event.target.id == "empid_input" || event.target.id == "emptreeNode" || $(event.target).parents("#emptreeNode").length>0)) {
			hideMenu();
		}
	}
	function onBodyDown(event) {
		
		if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
			hideMenu();
		}
	}
	//辅助角色
	function addAidRole(a,role,obj){
		
		var cityObj = $("#aid_character");
		//alert(cityObj.val());
		if(cityObj.val()!="")
			cityObj.val(cityObj.val()+","+obj);
		else cityObj.val(obj);
		$('#aid_hidden').val($('#aid_hidden').val()+role+',');
		//alert($('#aid_hidden').val());
		$(a).parent().hide();		
	}
	//清空辅助角色
	function emptyInput(){
		$("#aid_character").val("");
		var liobj=$('#select_aid>li');
		for(var i=0;i<liobj.length;i++){
			liobj.eq(i).show();
		}
	}
	//时间日期
	$(".form_datetime").datetimepicker({format: 'yyyy-mm-dd',language:  'zh-CN',weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
        showMeridian: 1,
        minView: 2,
        pickerPosition:"bottom-left"});
	//部门树
	var settingEmp = {
			view : {
				selectedMulti : false,//多选
				showLine : false,//不显示链接线
				txtSelectedEnable :true,//可以选择文字
				showIcon : false,//不显示ico
				dblClickExpand: false,//不允许双击展开关闭节点
				nameIsHTML: true

			},
			async : {
				enable : true,
				url : "${path}/newuser/loademp",
				autoParam : [ "id" ],
				otherParam : {
					"otherParam" : "zTreeAsyncTest"
				},//提交的参数[key：value]
				dataFilter : filter
			},
			callback : {
				beforeClick : beforeClick,
				beforeAsync : beforeAsync,
				onAsyncError : onAsyncError,
				onAsyncSuccess : onAsyncSuccess,
				
			},
			data : {
				simpleData : {
					enable : true,
				}
			}
		};
		function filter(treeId, parentNode, childNodes) {
			if (!childNodes)
				return null;
			for (var i = 0, l = childNodes.length; i < l; i++) {
				childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
			}
			return childNodes;
		}
		function beforeClick(treeId, treeNode) {
			var check = (treeNode && !treeNode.isParent);
			if (!check) {
				alert("只能选择叶子节点...")
				
			}else{
				var node=treeNode.getParentNode();
				var cityObj = $("#empid_input");
				var hempid=$("input[name='empno']");
				v="";
				if(node!=null)
					v+=node.name+"->";
				hempid.val(treeNode.id);
				cityObj.val(v+treeNode.name);
			}
			return check;
		}
		function beforeAsync(treeId, treeNode) {
		//异步加载之前调用
			return true;
		}

		function onAsyncError(event, treeId, treeNode, XMLHttpRequest,
				textStatus, errorThrown) {
			//showLog("[ "+getTime()+" onAsyncError ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
		}
		function onAsyncSuccess(event, treeId, treeNode, msg) {
			var treeObj = $.fn.zTree.getZTreeObj(treeId);
			treeObj.expandAll(true);//加载完成展开全部节点
			//showLog("[ "+getTime()+" onAsyncSuccess ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
			
		}
		//提交 表单&表单验证
		function bsubimt(){
			
			if($("input[name='user.account']").val()==""||$("input[name='user.account']").val().length<=0){
				alert("用户名不能为空");
				$("input[name='user.account']").focus();
				return ;
			}else if(jQuery("#select1  option:selected").val()==""||jQuery("#select1  option:selected").val().length<=0){
				alert("主角色不能为空");
				$("input[name='roleid']").focus();
				return ;
			}else if($("input[name='empno']").val()==""||$("input[name='empno']").length<=0){
				alert("部门不能为空")
				$("input[name='empno']").focus();
				return ;
			}
			var strRegex = /^[a-zA-Z]{1}[0-9a-zA-Z_]{1,}$/;
			if(!strRegex.test($("input[name='user.account']").val())){
				alert("帐号应有字符组成 ，且第一位为英文字母，不可有其他字符")
				$("input[name='user.account']").focus();
				return ;
			}
			if($("input[name='user.pass']").val()==""||$("input[name='user.pass']").length<=0)
				$("input[name='user.pass']").val("123");
			$("#newUser").submit();
			
			window.parent.frames['menu'].refempTreenode();
			//alert($("#newUser").serialize());
		}
	$(document).ready(function(){
		
		$.fn.zTree.init($("#emptreeNode"), settingEmp);
		//$('#select1').bind('change',function(){
		//	$("#"+jQuery("#select1  option:selected").val()).hide();
		//});
	});
	//-->
	</script>
<c:if test="${tip != null }" >
	<script>
		alert('${tip}');
	</script>
</c:if>
</body>
</html>